"use client";

import React from "react";
import { useRouter } from "next/navigation";
import { useTranslation } from "react-i18next";
import { motion } from "framer-motion";
import { Plus, RefreshCw, Upload } from "lucide-react";
import { USER_ROLES } from "@/const/modelConfig";
import { useAuth } from "@/hooks/useAuth";
import { useSetupFlow } from "@/hooks/useSetupFlow";
import AgentCard from "./AgentCard";

interface Agent {
  id: string;
  name: string;
  display_name: string;
  description: string;
  is_available: boolean;
}

interface SpaceContentProps {
  agents: Agent[];
  isLoading: boolean;
  isImporting: boolean;
  onRefresh: () => void;
  onLoadAgents: () => void;
  onImportAgent: () => void;
  onChatNavigate?: (agentId: string) => void;
  onEditNavigate?: () => void;
}

/**
 * Agent Space content component
 * Displays agent cards grid and management controls
 */
export function SpaceContent({
  agents,
  isLoading,
  isImporting,
  onRefresh,
  onLoadAgents,
  onImportAgent,
  onChatNavigate,
  onEditNavigate,
}: SpaceContentProps) {
  const router = useRouter();
  const { t } = useTranslation("common");
  const { user, isSpeedMode } = useAuth();
  const { canAccessProtectedData, pageVariants, pageTransition } = useSetupFlow({
    requireAdmin: false,
  });

  // Check if user is admin (or in speed mode where all features are available)
  const isAdmin = isSpeedMode || user?.role === USER_ROLES.ADMIN;

  // Handle create new agent - navigate to agents view
  const handleCreateAgent = () => {
    if (onEditNavigate) {
      onEditNavigate();
    }
  };

  // Handle chat with agent
  const handleChat = (agentId: string) => {
    if (onChatNavigate) {
      onChatNavigate(agentId);
    } else {
      // Fallback to URL navigation if callback not provided
      router.push(`/chat?agent_id=${agentId}`);
    }
  };

  if (!canAccessProtectedData) {
    return null;
  }

  return (
    <motion.div
      initial="initial"
      animate="in"
      exit="out"
      variants={pageVariants}
      transition={pageTransition}
      className="w-full px-4 md:px-8 lg:px-16 py-8"
    >
      <div className="max-w-7xl mx-auto">
        {/* Page header */}
        <div className="flex items-center justify-between mb-6">
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <h1 className="text-3xl font-bold text-blue-600 dark:text-blue-500">
              {t("space.title", "Agent Space")}
            </h1>
            <p className="text-slate-600 dark:text-slate-300 mt-2">
              {t(
                "space.description",
                "Manage and interact with your intelligent agents"
              )}
            </p>
          </motion.div>

          {/* Refresh button */}
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
          >
            <button
              onClick={onRefresh}
              disabled={isLoading}
              className="p-2 rounded-md hover:bg-blue-50 dark:hover:bg-blue-900/20 text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors disabled:opacity-50"
              title={t("common.refresh", "Refresh")}
            >
              <RefreshCw
                className={`h-5 w-5 ${isLoading ? "animate-spin" : ""}`}
              />
            </button>
          </motion.div>
        </div>

        {/* Agent cards grid */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 pb-8"
        >
          {/* Create/Import agent card - only for admin */}
          {isAdmin && (
            <motion.div
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.3, delay: 0.3 }}
              className="aspect-[4/3]"
            >
              <div className="w-full h-full flex flex-col gap-2">
                {/* Create new agent - top half */}
                <button
                  onClick={handleCreateAgent}
                  className="flex-1 border-2 border-dashed border-blue-300 dark:border-blue-600 rounded-lg hover:border-blue-500 dark:hover:border-blue-400 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-all duration-300 flex flex-col items-center justify-center gap-2 group"
                >
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/40 flex items-center justify-center group-hover:bg-blue-200 dark:group-hover:bg-blue-900/60 transition-colors">
                    <Plus className="h-6 w-6 text-blue-500 group-hover:text-blue-600 dark:text-blue-400 dark:group-hover:text-blue-300" />
                  </div>
                  <span className="text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300">
                    {t("space.createAgent", "Create New Agent")}
                  </span>
                </button>

                {/* Import agent - bottom half */}
                <button
                  onClick={onImportAgent}
                  disabled={isImporting}
                  className="flex-1 border-2 border-dashed border-green-300 dark:border-green-600 rounded-lg hover:border-green-500 dark:hover:border-green-400 bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/40 transition-all duration-300 flex flex-col items-center justify-center gap-2 group disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/40 flex items-center justify-center group-hover:bg-green-200 dark:group-hover:bg-green-900/60 transition-colors">
                    <Upload className="h-6 w-6 text-green-500 group-hover:text-green-600 dark:text-green-400 dark:group-hover:text-green-300" />
                  </div>
                  <span className="text-sm font-medium text-green-600 dark:text-green-400 group-hover:text-green-700 dark:group-hover:text-green-300">
                    {isImporting
                      ? t("subAgentPool.button.importing", "Importing...")
                      : t("subAgentPool.button.import", "Import Agent")}
                  </span>
                </button>
              </div>
            </motion.div>
          )}

          {/* Agent cards */}
          {agents.map((agent, index) => (
            <motion.div
              key={agent.id}
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.3, delay: 0.3 + (index + 1) * 0.05 }}
              className="aspect-[4/3]"
            >
              <AgentCard
                agent={agent}
                onRefresh={onLoadAgents}
                onChat={handleChat}
                onEdit={onEditNavigate}
              />
            </motion.div>
          ))}
        </motion.div>

        {/* Empty state */}
        {!isLoading && agents.length === 0 && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5, delay: 0.4 }}
            className="text-center py-16"
          >
            <p className="text-slate-500 dark:text-slate-400">
              {t(
                "space.noAgents",
                "No agents yet. Create your first agent to get started!"
              )}
            </p>
          </motion.div>
        )}
      </div>
    </motion.div>
  );
}

